<template>
  <div id="pay_list" ref="pay_list">
    <c-title :hide="false"
             text="付费列表"
    ></c-title>
    <div class="title">{{dataInfo.title}}</div>
    <div class="edit-box">
       <div class="nick-name">{{dataInfo.author}}</div>
       <div class="created-at">{{timestampToTime(dataInfo.virtual_created_at)}}</div>
    </div>
    <div class="article-img">
       <img v-if="dataInfo.thumb"  :src="dataInfo.thumb" />
       <img v-else src="../../assets/images/img_default.png" />
    </div>
    <div class="unlock">
      <div class="unlock-box">
        <i class="iconfont icon-course_unlock"></i>
        <span class="unlock-tips">此文章为付费文章，需购买才能阅读</span>
      </div>
    </div>
    <div class="btn" :class="[fun.getPhoneEnv() == 3 ? 'pc' : '']">
      <div class="money-box">
        <span class="fu">{{$i18n.t("money")}}</span><span class="price">{{dataInfo.money}}</span>
      </div>
      <div class="right-btn" @click="confirm">
        付费阅读
      </div>
    </div>
    <van-popup v-model="rewardPayshow"
               position="bottom"
               :overlay="true">
      <div class="rewardPay">
        <div class="payMode">
          <ul>
            <li @click="payBtn(item.value, item.name)"
                v-for="(item, index) in btnData"
                :key='index'>
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="cancel"
             @click="rewardPayCancelBtn">取消
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import pay_list_controller from "./pay_list_controller";

export default pay_list_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  #pay_list {
    position: relative;
    background-color: #fff;
    height: 100vh;
    .unlock{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 10.7813rem;
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
      z-index: 10;
    }
    .icon-course_unlock{
      position: relative;
      width: 3.625rem;
      height: 3.625rem;
      line-height: 3.625rem;
      color:#fff;
      background-color: #7F7F7F;
      z-index: 5;
      font-size: 1.5rem;
      font-weight: bold;
      border-radius: 100%;
    }
    .unlock-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 15.5rem;
    }
    .unlock-tips{
      color:#6E6E79;
      font-size: 0.875rem;
      margin-top: 0.9688rem;
    }
    .edit-box{
      display: flex;
      align-items: center;
      padding: 0 1.25rem;
    }
    .article-img{
      padding: 1.1563rem  1rem;
      img{
        margin: 0;
        width: 21.4375rem;
        border-radius: 0.75rem;
      }
    }
    .nick-name{
      font-size: 0.875rem;
      color:#6E6E79;
      font-weight: 400;
      margin-right: 0.625rem;
    }
    .created-at{
      color:#AAAAB3;
      font-size: 0.8125rem;
      font-weight: 400;
    }
    .title{
      font-weight: bold;
      color: #00001C;
      font-size: 1.25rem;
      padding: 0.8125rem 1rem;
      text-align: left;
    }


    .btn {
      height: 3.0625rem;
      background-color: #fff;
      width: 100%;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1.4375rem;
      border-top: 1px solid #F0F0F1;
      z-index: 20;
      .money-box {
        color: #F15353;
        text-align: left;
        font-weight: bold;
        display: flex;
        align-items: baseline;
      }
      .fu {
          font-size: 0.8125rem;
          margin-right: 0.0625rem;
        }
      .price{
        font-size: 1.125rem;
      }
      .right-btn {
        width: 5.625rem;
        height: 2.25rem;
        border-radius: 1.125rem;
        background-color: #F15353;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:0.875rem;
        color: #fff;
        font-weight: 500;
      }
    }

    .rewardPay {
      background-color: #f2f2f2;

      .content {
        background-color: #fff;

        span {
          color: #1c96fe;
        }

        text-align: left;
        padding: 0.6rem;
        min-height: 3.44rem;
        font-size: 0.8rem;
        line-height: 1rem;
        width: 100%;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
      }

      .payMode {
        ul {
          li {
            background-color: #fff;
            height: 3.44rem;
            border-bottom: 0.06rem solid #eee;
            font-size: 1rem;
            color: #333;
            line-height: 3.44rem;
          }

          li:last-of-type {
            border-bottom: none;
            margin-bottom: 0.69rem;
          }
        }
      }

      .cancel {
        background-color: #fff;
        height: 3.44rem;
        border-bottom: 0.06rem solid #eee;
        font-size: 1rem;
        color: #333;
        line-height: 3.44rem;
      }
    }
  }

  .pc {
    width: 375px !important;
  }

</style>
